import React, { useEffect } from "react";
import styles from "./Music.module.css";
import { songListApi } from "../../utils/backend/server";
import { Song } from "../../utils/domain/Song";
import { useSelector } from "react-redux";
import { RootState } from "../../utils/store/store";
import { useAppDispatch } from "../../utils/store/hooks";
import {
  setCurrentSongInfo,
  updateAllSongList,
} from "../../utils/store/songSlice";
import { MusicHeader } from "../../components/MusicHeader/MusicHeader";
import { PlayBar } from "../../components/PlayBar/PlayBar";
import { message } from "antd";
export default () => {
  const info = useSelector<RootState, Song>(
    (state) => state.song.currentSongInfo
  );

  const dispatch = useAppDispatch();

  useEffect(() => {
    songListApi.getAllListData().then((data) => {
      dispatch(updateAllSongList(data));
      const songs = data.find((val) => val.currentList === "1").songs;
      if (songs.length > 0) dispatch(setCurrentSongInfo(songs[0]));
      else message.warning("please upload music!");
    });
  }, []);

  return (
    <div className={styles.container}>
      <MusicHeader />
      <div className={styles.imgBox}>
        <img src="lp.webp" alt="" className={styles.bg} />
      </div>
      <div className={styles.content}>
        <div className={styles.cover}>
          <img src={info.thumbnail || "/lp.webp"} alt="cover" />
        </div>
        <div className={styles.info}>
          <h1>{info.title}</h1>
          <h2>
            <p>
              <label>album:</label>
              <span>{info.album}</span>
            </p>
            <p>
              <label>author:</label>
              <span>{info.author}</span>
            </p>
          </h2>
          {/* <p>{info.lyrics || "no lyrics"}</p> */}
          <p>{"no lyrics"}</p>
        </div>
      </div>
      <PlayBar />
    </div>
  );
};

export type MusicStateType = "playing" | "paused";
